<template>
<!--我的订单-->
  <div class="orders">
      <div class="titleWrap font14">
        <p class="titleName">我的计划</p>
      </div>
      <span v-if="plans.length > 0">
        <ul class="orderOut" style="cursor: pointer">
          <li v-for="plan in plans" @click.stop="goPlan(plan.id)">
            <div class="plans font14">
              <p><span class="orderTimer">计划名称：</span>{{plan.planName}}</p>
              <p style="margin-bottom: 10px" v-if="plan.deptIds.length > 0"><span class="orderTimer">计划参与部门：</span>{{getDependent(plan.deptIds)}}</p>
              <p>
                <span class="orderTimer">创建时间：</span>{{planTimeFormat(plan.createTime)}}
                <span class="pull-right"><span class="orderTimer ">结束时间：</span>{{planTimeFormat(plan.endTime)}}</span>
              </p>
            </div>
          </li>
        </ul>
        <div class="pageout"><Page :total="total" :current="pageNumber" :page-size="size" @on-change="changePage"/></div>
      </span>
      <span v-else>
          <nodata tip="暂时还没有任何计划哦~"></nodata>
      </span>
      <Spin fix v-show="isSpinShow" >
        <div class="loader">
          <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
          <div class="font14">加载中...</div>
        </div>
      </Spin>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }

  .plans {
    color: #333;
    p:first-child{
      margin-bottom: 10px;
    }
    .orderTimer {
      margin-right: 10px;
      color: #999;
    }
  }
    .titleWrap {
      height: 40px;
      /*font-size: 18px;*/
      padding-bottom: 20px;
      text-align: justify-all;
      border-bottom: 1px solid #E1E1E1;
      .titleName {
        float: left;
        line-height: 24px;
        color: #957960;
        border-bottom: 3px solid #957960;
        padding-bottom: 13px;
      }
    }
    .orderName {
      display: inline-block !important;
      max-width: 100%;
    }
    .processOut {
      height: 30px;
      margin-top: 20px;
      .botnum {
        /*font-size: 16px;*/
        color: #999;
        display: inline-block;
        vertical-align: middle;
      }
      .peocessLine {
        display: inline-block;
        vertical-align: middle;
        width: 300px;
        margin-left: 30px;
      }
    }
    .orderOut li {
      padding: 24px 0;
      border-bottom: 1px solid #E1E1E1;
      .orderTitle {
        /*font-size: 16px;*/
        color: #999;
        height: 24px;
        line-height: 24px;
        cursor: pointer;
      }
      .orderInfo {
        padding: 15px 75px 0 220px;
        position: relative;
        height: 125px;
        .orderImg {
          display: block;
          width: 200px;
          height: 110px;
          overflow: hidden;
          position: absolute;
          left: 0px;
          top: 15px;
        }
        .orderName, .orderType {
          /*font-size: 16px;*/
          color: #333;
          line-height: 24px;
          display: block;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          word-break: break-all;
          word-wrap: break-word;
        }
        .orderName {
          margin-top: 2px;
        }
        .orderName:hover {
          color: #957960;
        }
        .orderType {
          margin-top: 8px;
        }
      }
    }
    .classFinish,.gostudy {
      display: inline-block;
      width: 70px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      color: #999;
      border-radius: 5px;
      border: 1px solid #999;
      position: absolute;
      right: 0px;
      top: 15px;
    }
    .gostudy {
      color: #957960;
      border: 1px solid #957960;
      cursor: pointer;
    }
    .orderset .processOut {
      margin-top: 52px;
    }
    .pageout {
      text-align: center;
      margin-top: 25px;
      height: 34px;
    }


</style>
<script type="text/ecmascript-6">
  import centers from '../template/center'
  import nodata from '../template/null'
  import {myPlanPageWeb,centreInfoWeb} from '../../http'
  import {getStore} from '../../storage'
    export default {
        name: '',
        props: {},
        data() {
            return {
              isSpinShow:false,
              total:0,
              size:16,
              pageNumber:1,
              plans:'',         //计划列表
            };
        },
        methods: {
          //时间格式化（去掉秒钟）
          planTimeFormat(str){
            return str.toString().substring(0,16);
          },
          //格式化CST日期的字串
          formatCSTDate(strDate,format){
            return strDate.toString().substring(0,16);
            // return this.formatDate(new Date(strDate),format);
          },
          //格式化日期
          formatDate(date,format){
            var paddNum = function(num){
              num += "";
              return num.replace(/^(\d)$/,"0$1");
            }
            //指定格式字符
            var cfg = {
              yyyy : date.getFullYear() //年 : 4位
              ,yy : date.getFullYear().toString().substring(2)//年 : 2位
              ,M  : date.getMonth() + 1  //月 : 如果1位的时候不补0
              ,MM : paddNum(date.getMonth() + 1) //月 : 如果1位的时候补0
              ,d  : date.getDate()   //日 : 如果1位的时候不补0
              ,dd : paddNum(date.getDate())//日 : 如果1位的时候补0
              ,hh : date.getHours()  //时
              ,mm : date.getMinutes() //分
              ,ss : date.getSeconds() //秒
            }
            format || (format = "yyyy-MM-dd hh:mm:ss");
            return format.replace(/([a-z])(\1)*/ig,function(m){return cfg[m];});
        },
        //获取参与部门
          getDependent(depts){
            let deptsResult;
            if(depts.length !== undefined && depts.length > 0){
              deptsResult = depts[0];
            }else {
              return '';
            }
            for(let i = 1 ; i < depts.length; i++){
              deptsResult =  deptsResult + "，"+ depts[i] ;
            }
            return deptsResult;
          },
          //计划详情
          goPlan(id){
            this.$router.push({
              name:'plandetail',
              query:{
                planId:id,
              }
            })
          },
          //换页
          changePage(pageNumber){
            this.pageNumber = pageNumber;
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户是否登录
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  //计划页面
                  myPlanPageWeb({pageNumber: this.pageNumber, pageSize: this.size}).then(res => {
                    if(res.code === 200) {
                      this.isSpinShow = false;
                      this.total = res.data.myPlans.total;
                      this.plans = res.data.myPlans.plans;
                    }else {
                      this.isSpinShow = false;
                      this.$Notice.warning({
                        title: "个人中心提醒",
                        desc: res.info,
                        duration: 3,
                      });
                    }
                  }).catch()
                } else {
                  this.isSpinShow = false;
                  this.$parent.$refs.loginInput.showModal()
                }
              })
            }
          },
          getPlan(){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户是否登录
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  //获取计划列表
                  myPlanPageWeb({pageNumber: this.pageNumber, pageSize: this.size}).then(res => {
                    if(res.code === 200) {
                      this.isSpinShow = false;
                      this.total = res.data.myPlans.total;
                      this.plans = res.data.myPlans.rows;
                    }else {
                      this.isSpinShow = false;
                      this.$Notice.warning({
                        title: "个人中心提醒",
                        desc: res.info,
                        duration: 3,
                      });
                    }
                  }).catch()
                }else {
                  this.isSpinShow = false;
                }
              }).catch()
            }
          }
        },
        created() {
          this.getPlan()
        },
        components: {
          nodata
        }
    }
</script>
